<div draggable mat-dialog-title>
  <h6>{{"addPerson" | translate}}</h6>
  <button mat-button matSuffix mat-icon-button (click)="dialogRef.close('Close')" matTooltip="{{'close' | translate}}">
    <mat-icon svgIcon="close" style="color: darkblue;"></mat-icon>
  </button>
</div>

<div mat-dialog-content class="wdl-dialog-content pwizard-content">
  <aw-wizard [navBarLayout]="'large-filled-symbols'">
    <aw-wizard-step
     stepTitle="{{'basicInfo' | translate}}"
     [canExit]="basicForm.valid"
     [navigationSymbol]="{symbol: '1'}">
      <div class="pwizard-step">
        <form [formGroup]="basicForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="6" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="personName" matInput placeholder="{{'name' | translate}}" required cdkFocusRegionStart>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <mat-select formControlName="sex" placeholder="{{'sex' | translate}}">
                <mat-option value="male">{{'male' | translate}}</mat-option>
                <mat-option value="female">{{'female' | translate}}</mat-option>
              </mat-select>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="birth" matInput [matDatepicker]="dp" placeholder="{{'birth' | translate}}">
              <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
              <mat-datepicker #dp></mat-datepicker>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="rid" matInput placeholder="{{'rid' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <mat-select formControlName="education" placeholder="{{'education' | translate}}">
                <mat-option value="none">{{'none' | translate}}</mat-option>
                <mat-option value="primary">{{'primary' | translate}}</mat-option>
                <mat-option value="middle">{{'middle' | translate}}</mat-option>
                <mat-option value="college">{{'college' | translate}}</mat-option>
              </mat-select>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="phone" matInput placeholder="{{'phone' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="nation" matInput placeholder="{{'nation' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="6">
            <mat-form-field>
              <input formControlName="address" matInput placeholder="{{'address' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
      </div>

      <div class="pwizard-action">
        <button mat-button disabled awPreviousStep>{{'prevStep' | translate}}</button>
        <button mat-button awNextStep>{{'nextStep' | translate}}</button>
      </div>
    </aw-wizard-step>

    <aw-wizard-step stepTitle="{{'contactInfo' | translate}}" [navigationSymbol]="{symbol: '2'}">
      <div class="pwizard-step">
        <form [formGroup]="contactForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="6" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="contact1Name" matInput placeholder="{{'contact1Name' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <mat-select formControlName="contact1Sex" placeholder="{{'sex' | translate}}">
                <mat-option value="male">{{'male' | translate}}</mat-option>
                <mat-option value="female">{{'female' | translate}}</mat-option>
              </mat-select>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="contact1Phone" matInput placeholder="{{'phone' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="6">
            <mat-form-field>
              <input formControlName="contact1Address" matInput placeholder="{{'address' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="3">
            <mat-form-field>
              <input formControlName="contact2Name" matInput placeholder="{{'contact2Name' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <mat-select formControlName="contact2Sex" placeholder="{{'sex' | translate}}">
                <mat-option value="male">{{'male' | translate}}</mat-option>
                <mat-option value="female">{{'female' | translate}}</mat-option>
              </mat-select>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="contact2Phone" matInput placeholder="{{'phone' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="6">
            <mat-form-field>
              <input formControlName="contact2Address" matInput placeholder="{{'address' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
      </div>

      <div class="pwizard-action">
        <button mat-button awPreviousStep>{{'prevStep' | translate}}</button>
        <button mat-button awNextStep>{{'nextStep' | translate}}</button>
      </div>
    </aw-wizard-step>

    <aw-wizard-step stepTitle="{{'healthSetting' | translate}}" [navigationSymbol]="{symbol: '3'}">
      <div class="pwizard-step">
        <form [formGroup]="healthForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="4" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="heartUp" type="number" matInput placeholder="{{'heartUp' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="heartLow" type="number" matInput placeholder="{{'heartLow' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="breatheUp" type="number" matInput placeholder="{{'breatheUp' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="breatheLow" type="number" matInput placeholder="{{'breatheLow' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="move" type="number" matInput placeholder="{{'moveThreshold' | translate}}">
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <mat-select formControlName="turnOverReminder" placeholder="{{'turnOverReminder' | translate}}">
                <mat-option [value]="0">{{'noReminder' | translate}}</mat-option>
                <mat-option [value]="90">1.5 {{'hours' | translate}}</mat-option>
                <mat-option [value]="120">2 {{'hours' | translate}}</mat-option>
                <mat-option [value]="180">3 {{'hours' | translate}}</mat-option>
                <mat-option [value]="240">4 {{'hours' | translate}}</mat-option>
              </mat-select>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1" class="wdl-checkbox">
            <mat-checkbox formControlName="awayAlarm" [disableRipple]="true">{{'awayAlarm' | translate}}</mat-checkbox>
          </mat-grid-tile>
          <mat-grid-tile colspan="1" class="wdl-checkbox">
            <mat-checkbox formControlName="upAlarm" [disableRipple]="true">{{'upAlarm' | translate}}</mat-checkbox>
          </mat-grid-tile>
          <mat-grid-tile colspan="1" class="wdl-checkbox">
            <mat-checkbox formControlName="sideAlarm" [disableRipple]="true">{{'sideAlarm' | translate}}</mat-checkbox>
          </mat-grid-tile>
          <mat-grid-tile colspan="1" class="wdl-checkbox">
            <mat-checkbox formControlName="silent" [disableRipple]="true">{{'silent' | translate}}</mat-checkbox>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
      </div>

      <div class="pwizard-action">
        <button mat-button awPreviousStep>{{'prevStep' | translate}}</button>
        <button mat-button awNextStep>{{'nextStep' | translate}}</button>
      </div>
    </aw-wizard-step>

    <aw-wizard-step stepTitle="{{'inHospitalInfo' | translate}}" [navigationSymbol]="{symbol: '4'}">
      <div class="pwizard-step">
        <form [formGroup]="hospitalForm" class="form-container" novalidate autocomplete="off">
        <mat-grid-list cols="2" rowHeight="70px" gutterSize="10">
          <mat-grid-tile colspan="1">
            <mat-form-field>
              <mat-select formControlName="nurseId" placeholder="{{'majorNurse' | translate}}">
                <mat-option *ngFor="let nurse of nurses" [value]="nurse.id">{{nurse.nurseName}}</mat-option>
              </mat-select>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="1">
            <mat-form-field>
              <mat-select formControlName="device1Id" placeholder="{{'device1' | translate}}">
                <mat-option *ngFor="let device of devices" [value]="device.deviceId">{{device.deviceId}}</mat-option>
              </mat-select>
            </mat-form-field>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <app-bselection style="width: 100%;" [readonly]="readonly" [bedId]="bedId" [unique]="true" (change)="bedSelectionChange($event)"></app-bselection>
          </mat-grid-tile>

          <mat-grid-tile colspan="2">
            <mat-form-field>
              <input formControlName="checkinRecord" matInput placeholder="{{'checkinRecord' | translate}}">
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
      </form>
      </div>

      <div class="pwizard-action">
        <button mat-button awPreviousStep>{{'prevStep' | translate}}</button>
        <button mat-button type="button" (click)="submit()">{{"submit" | translate}}</button>
      </div>
    </aw-wizard-step>
  </aw-wizard>
</div>
